import type { RadioChangeEvent } from "antd";
import { Checkbox, Input, Select, Switch } from "antd";
import type { CheckboxChangeEvent } from "antd/es/checkbox";
import { useEffect, useState } from "react";
import request from "umi-request";
import "./style/index.scss";
const response = await request.get("/api/User/bork");

//定义的tab切换数据的类型
interface Tab {
  label: string;
}
//定义的addtab切换数据的类型
interface AddTab {
  Addlabel: string;
}

const Community = () => {
  const now = new Date();
  const year = now.getFullYear(); // 获取当前年份
  const month = now.getMonth() + 1; // 获取当前月份（注意返回值范围是0-11）
  const day = now.getDate(); // 获取当前日期
  //添加里的tab切换数据
  const AddTABS: AddTab[] = [
    { Addlabel: "小区信息" },
    { Addlabel: "配套信息" },
  ];
  //tab表格数据
  const [arr, setarr] = useState<any>([
    {
      id: "788524244",
      checked: false,
      "paixu|100-1000": 100,
      xiaoqu: "@ctitle(4,6)",
      quyu: "@city",
      date: "@date",
      "checkedtwo|1": false,
    },
  ]);
  const [narr, setnarr] = useState([]);
  //tab切换
  const [activeTab, setActiveTab] = useState<number>(0);
  //添加里面的的tab切换
  const [AddactiveTab, setAddActiveTab] = useState<number>(0);
  //状态
  const [status, setstatus] = useState<boolean>(false);
  //tab切换点击
  function handleClick(index: number) {
    setActiveTab(index);
  }
  //添加里面的的tab切换点击
  function handleClickAdd(index: number) {
    setAddActiveTab(index);
    console.log(index);
  }

  //下拉框
  const onChange = (value: string) => {
    let brr = [...arr];
    if (value == "启用") {
      let crr: any = brr.filter((item: any) => {
        return item.checkedtwo == true;
      });
      setnarr(crr);
    } else if (value == "禁用") {
      let crr: any = brr.filter((item: any) => {
        return item.checkedtwo == false;
      });
      setnarr(crr);
    } else {
      setnarr(arr);
    }
  };

  //搜索 模糊查询
  const onSearch = (value: string) => {
    let brr = [...arr];
    let crr: any = brr.filter((item) => {
      return item.xiaoqu.includes(value);
    });
    setnarr(crr);
  };

  //input
  const { Search } = Input;

  //顶部多选框
  function checkAll(e: any) {
    console.log(`checkAll = ${e.target.checked}`);
  }
  //反选
  function yfaBdbawi(item: any) {
    let brr = [...arr];
    for (let i = 0; i < arr.length; i++) {
      if (brr[i].id == item.id) {
        item.checked = !item.checked;
      }
    }

    setarr(brr);
    let kgMc = brr.every((item) => {
      return item.checked;
    });
    setkg(kgMc);
  }
  //底部多选框
  const Checkboxs = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };
  //单选
  function check(e: any) {
    console.log(`单选 = ${e.target.checked}`);
  }
  //编辑点击事件
  function edit() {
    console.log("编辑", 1);
  }
  //删除点击事件
  function del() {
    console.log("删除", 1);
  }
  //选中删除
  function shanchu() {
    let brr = [...narr];
    let crr: any = [];
    brr.forEach((item: any, index) => {
      if (item.checked === false) {
        crr.push(item);
      }
    });
    setnarr(crr);
    setkg(false);
  }
  //配套信息里的提交按钮
  function AddTj() {}
  //小区信息里的提交按钮
  function CommunityAddtj() {
    let brr = [...narr];
    brr.push(brr[0]);
    setnarr(brr);
    setActiveTab(0);
  }
  //状态
  function statu(e: any) {
    let brr = [...narr];
    brr.forEach((item: any, index) => {
      if (item == e) {
        item.checkedtwo = !item.checkedtwo;
      }
    });
    setnarr(brr);
  }
  ///全选
  function inputc(e: any) {
    setkg(e.target.checked);
    let brr: any = [...narr];
    brr.forEach((item: any) => {
      return (item.checked = e.target.checked);
    });
    setnarr(brr);
  }
  //添加里面的 单选框
  const [value, setValue] = useState(1);
  //定义全选状态
  const [kg, setkg] = useState(false);
  const onChangeRadio = (e: RadioChangeEvent) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };
  //删除
  function delect(index: number) {
    let brr = [...narr];
    brr.splice(index, 1);
    setnarr(brr);
  }
  //顶部导航数据
  const [topindex, settopindex] = useState(0);
  const [mklist, setlist] = useState([
    "新房预约",
    "出租房预约",
    "二手房预约",
    "写字楼出售",
    "写字楼出租",
    "商铺出售",
    "商铺出租",
  ]);
  //切换高亮
  function hyudagw(index: number) {
    settopindex(index);
  }
  useEffect(() => {
    setarr(response);
    setnarr(response);
  }, []);
  return (
    //大盒子
    <div className="box1gsdfasgwesgs">
      {/* 顶部导航 */}
      <div className="Communityhang" style={{ width: "90vw" }}>
        {mklist.map((item, index) => {
          return (
            <span
              className={topindex == index ? "active" : ""}
              onClick={() => hyudagw(index)}
            >
              {item}
            </span>
          );
        })}
      </div>
      <div className="joiuho" style={{ display: topindex == 0 ? "block" : "" }}>
        {" "}
        {/* 头部 */}
        <div className="Communityheader">{/* 渲染的 列表|添加 tab切换 */}</div>
        {/* 中间 */}
        <div className="CommunityMain">
          {/* tab切换 内容  列表*/}
          <div
            className="Communitytab"
            style={{ display: activeTab == 0 ? "block" : "" }}
          >
            <div className="CommunityMainTow">
              <div className="CommunityMainTowB">
                <div>状态</div>
                <div>
                  <Select
                    showSearch
                    placeholder="-所有-"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      (option?.label ?? "")
                        .toLowerCase()
                        .includes(input.toLowerCase())
                    }
                    options={[
                      {
                        value: "所有",
                        label: "所有",
                      },
                      {
                        value: "启用",
                        label: "启用",
                      },
                      {
                        value: "禁用",
                        label: "禁用",
                      },
                    ]}
                  />
                </div>
              </div>
              <div>
                <button>搜索</button>
              </div>
            </div>
            <div className="tabBox">
              {/* tab表格 */}
              <table className="table" cellSpacing={0}>
                {/* 头部 */}
                <thead>
                  <tr>
                    <td>
                      <input checked={kg} onChange={inputc} type="checkbox" />
                    </td>
                    <td>ID</td>
                    <td>评论人</td>
                    <td>经纪人</td>
                    <td>内容</td>
                    <td>评论时间</td>
                    <td>状态</td>
                    <td>操作</td>
                  </tr>
                </thead>
                {/* 中间 */}

                <tbody>
                  {/* 渲染 */}
                  {narr
                    ? narr.map((item: any, index: number) => {
                        return (
                          <tr key={index}>
                            <td>
                              <input
                                type="checkbox"
                                checked={item.checked}
                                onChange={() => yfaBdbawi(item)}
                              />
                            </td>
                            <td style={{ width: "12vw" }}>{item.id}</td>
                            <td style={{ width: "12vw" }}>{item.xiaoqu}</td>
                            <td style={{ width: "12vw" }}>{item.quyu}</td>
                            <td style={{ width: "12vw" }}>{item.neirong}</td>
                            <td style={{ width: "10vw" }}>{item.paixu}</td>
                            <td style={{ width: "10vw" }}>
                              <Switch
                                size="default"
                                checkedChildren="已联系"
                                unCheckedChildren="待联系"
                                checked={item.checkedtwo}
                                onChange={() => statu(item)}
                              />
                            </td>
                            <td>
                              <button className="hufiaw">分配经纪人</button>
                              <button className="hufiaw">看跟进</button>
                              <button
                                className="del123"
                                onClick={() => delect(index)}
                              >
                                删除
                              </button>
                            </td>
                          </tr>
                        );
                      })
                    : ""}
                </tbody>
              </table>
            </div>
            {/* 底部 */}
            <div className="CommunityFoot">
              <div className="CommunityFootA">
                <Checkbox checked={kg} onChange={inputc}>
                  全选/取消
                </Checkbox>
                <button onClick={shanchu}>删除</button>
              </div>
            </div>
            {/* 状态显示 */}
            <div
              className="tbodystatu"
              style={{
                display: status ? "block" : "",
              }}
            >
              <img src={require("../../imgs/tu.png")} alt="" />
            </div>
          </div>
        </div>
      </div>
      <div className="joiuho" style={{ display: topindex == 1 ? "block" : "" }}>
        {" "}
        {/* 头部 */}
        <div className="Communityheader">{/* 渲染的 列表|添加 tab切换 */}</div>
        {/* 中间 */}
        <div className="CommunityMain">
          {/* tab切换 内容  列表*/}
          <div
            className="Communitytab"
            style={{ display: activeTab == 0 ? "block" : "" }}
          >
            <div className="CommunityMainTow">
              <div className="CommunityMainTowB">
                <div>状态</div>
                <div>
                  <Select
                    showSearch
                    placeholder="-所有-"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      (option?.label ?? "")
                        .toLowerCase()
                        .includes(input.toLowerCase())
                    }
                    options={[
                      {
                        value: "所有",
                        label: "所有",
                      },
                      {
                        value: "启用",
                        label: "启用",
                      },
                      {
                        value: "禁用",
                        label: "禁用",
                      },
                    ]}
                  />
                </div>
              </div>
              <div>
                <button>搜索</button>
              </div>
            </div>
            <div className="tabBox">
              {/* tab表格 */}
              <table className="table" cellSpacing={0}>
                {/* 头部 */}
                <thead>
                  <tr>
                    <td>
                      <input checked={kg} onChange={inputc} type="checkbox" />
                    </td>
                    <td>ID</td>
                    <td>评论人</td>
                    <td>经纪人</td>
                    <td>内容</td>
                    <td>评论时间</td>
                    <td>状态</td>
                    <td>操作</td>
                  </tr>
                </thead>
                {/* 中间 */}

                <tbody>
                  {/* 渲染 */}
                  {narr
                    ? narr.map((item: any, index: number) => {
                        return (
                          <tr key={index}>
                            <td>
                              <input
                                type="checkbox"
                                checked={item.checked}
                                onChange={() => yfaBdbawi(item)}
                              />
                            </td>
                            <td style={{ width: "12vw" }}>{item.id}</td>
                            <td style={{ width: "12vw" }}>{item.xiaoqu}</td>
                            <td style={{ width: "12vw" }}>{item.quyu}</td>
                            <td style={{ width: "12vw" }}>{item.neirong}</td>
                            <td style={{ width: "10vw" }}>{item.paixu}</td>
                            <td style={{ width: "10vw" }}>
                              <Switch
                                size="default"
                                checkedChildren="正常"
                                unCheckedChildren="禁用"
                                checked={item.checkedtwo}
                                onChange={() => statu(item)}
                              />
                            </td>
                            <td>
                              <button
                                className="del"
                                onClick={() => delect(index)}
                              >
                                删除
                              </button>
                            </td>
                          </tr>
                        );
                      })
                    : ""}
                </tbody>
              </table>
            </div>
            {/* 底部 */}
            <div className="CommunityFoot">
              <div className="CommunityFootA">
                <Checkbox checked={kg} onChange={inputc}>
                  全选/取消
                </Checkbox>

                <button onClick={shanchu}>删除</button>
              </div>
            </div>
            {/* 状态显示 */}
            <div
              className="tbodystatu"
              style={{
                display: status ? "block" : "",
              }}
            >
              <img src={require("../../imgs/tu.png")} alt="" />
            </div>
          </div>
        </div>
      </div>
      <div className="joiuho" style={{ display: topindex == 2 ? "block" : "" }}>
        {" "}
        {/* 头部 */}
        <div className="Communityheader">{/* 渲染的 列表|添加 tab切换 */}</div>
        {/* 中间 */}
        <div className="CommunityMain">
          {/* tab切换 内容  列表*/}
          <div
            className="Communitytab"
            style={{ display: activeTab == 0 ? "block" : "" }}
          >
            <div className="CommunityMainTow">
              <div className="CommunityMainTowB">
                <div>状态</div>
                <div>
                  <Select
                    showSearch
                    placeholder="-所有-"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      (option?.label ?? "")
                        .toLowerCase()
                        .includes(input.toLowerCase())
                    }
                    options={[
                      {
                        value: "所有",
                        label: "所有",
                      },
                      {
                        value: "启用",
                        label: "启用",
                      },
                      {
                        value: "禁用",
                        label: "禁用",
                      },
                    ]}
                  />
                </div>
              </div>
              <div>
                <button>搜索</button>
              </div>
            </div>
            <div className="tabBox">
              {/* tab表格 */}
              <table className="table" cellSpacing={0}>
                {/* 头部 */}
                <thead>
                  <tr>
                    <td>
                      <input checked={kg} onChange={inputc} type="checkbox" />
                    </td>
                    <td>ID</td>
                    <td>评论人</td>
                    <td>经纪人</td>
                    <td>内容</td>
                    <td>评论时间</td>
                    <td>状态</td>
                    <td>操作</td>
                  </tr>
                </thead>
                {/* 中间 */}

                <tbody>
                  {/* 渲染 */}
                  {narr
                    ? narr.map((item: any, index: number) => {
                        return (
                          <tr key={index}>
                            <td>
                              <input
                                type="checkbox"
                                checked={item.checked}
                                onChange={() => yfaBdbawi(item)}
                              />
                            </td>
                            <td style={{ width: "12vw" }}>{item.id}</td>
                            <td style={{ width: "12vw" }}>{item.xiaoqu}</td>
                            <td style={{ width: "12vw" }}>{item.quyu}</td>
                            <td style={{ width: "12vw" }}>{item.neirong}</td>
                            <td style={{ width: "10vw" }}>{item.paixu}</td>
                            <td style={{ width: "10vw" }}>
                              <Switch
                                size="default"
                                checkedChildren="正常"
                                unCheckedChildren="禁用"
                                checked={item.checkedtwo}
                                onChange={() => statu(item)}
                              />
                            </td>
                            <td>
                              <button
                                className="del"
                                onClick={() => delect(index)}
                              >
                                删除
                              </button>
                            </td>
                          </tr>
                        );
                      })
                    : ""}
                </tbody>
              </table>
            </div>
            {/* 底部 */}
            <div className="CommunityFoot">
              <div className="CommunityFootA">
                <Checkbox checked={kg} onChange={inputc}>
                  全选/取消
                </Checkbox>

                <button onClick={shanchu}>删除</button>
              </div>
            </div>
            {/* 状态显示 */}
            <div
              className="tbodystatu"
              style={{
                display: status ? "block" : "",
              }}
            >
              <img src={require("../../imgs/tu.png")} alt="" />
            </div>
          </div>
        </div>
      </div>
      <div className="joiuho" style={{ display: topindex == 3 ? "block" : "" }}>
        {" "}
        {/* 头部 */}
        <div className="Communityheader">{/* 渲染的 列表|添加 tab切换 */}</div>
        {/* 中间 */}
        <div className="CommunityMain">
          {/* tab切换 内容  列表*/}
          <div
            className="Communitytab"
            style={{ display: activeTab == 0 ? "block" : "" }}
          >
            <div className="CommunityMainTow">
              <div className="CommunityMainTowB">
                <div>状态</div>
                <div>
                  <Select
                    showSearch
                    placeholder="-所有-"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      (option?.label ?? "")
                        .toLowerCase()
                        .includes(input.toLowerCase())
                    }
                    options={[
                      {
                        value: "所有",
                        label: "所有",
                      },
                      {
                        value: "启用",
                        label: "启用",
                      },
                      {
                        value: "禁用",
                        label: "禁用",
                      },
                    ]}
                  />
                </div>
              </div>
              <div>
                <button>搜索</button>
              </div>
            </div>
            <div className="tabBox">
              {/* tab表格 */}
              <table className="table" cellSpacing={0}>
                {/* 头部 */}
                <thead>
                  <tr>
                    <td>
                      <input checked={kg} onChange={inputc} type="checkbox" />
                    </td>
                    <td>ID</td>
                    <td>评论人</td>
                    <td>经纪人</td>
                    <td>内容</td>
                    <td>评论时间</td>
                    <td>状态</td>
                    <td>操作</td>
                  </tr>
                </thead>
                {/* 中间 */}

                <tbody>
                  {/* 渲染 */}
                  {narr
                    ? narr.map((item: any, index: number) => {
                        return (
                          <tr key={index}>
                            <td>
                              <input
                                type="checkbox"
                                checked={item.checked}
                                onChange={() => yfaBdbawi(item)}
                              />
                            </td>
                            <td style={{ width: "12vw" }}>{item.id}</td>
                            <td style={{ width: "12vw" }}>{item.xiaoqu}</td>
                            <td style={{ width: "12vw" }}>{item.quyu}</td>
                            <td style={{ width: "12vw" }}>{item.neirong}</td>
                            <td style={{ width: "10vw" }}>{item.paixu}</td>
                            <td style={{ width: "10vw" }}>
                              <Switch
                                size="default"
                                checkedChildren="正常"
                                unCheckedChildren="禁用"
                                checked={item.checkedtwo}
                                onChange={() => statu(item)}
                              />
                            </td>
                            <td>
                              <button
                                className="del"
                                onClick={() => delect(index)}
                              >
                                删除
                              </button>
                            </td>
                          </tr>
                        );
                      })
                    : ""}
                </tbody>
              </table>
            </div>
            {/* 底部 */}
            <div className="CommunityFoot">
              <div className="CommunityFootA">
                <Checkbox checked={kg} onChange={inputc}>
                  全选/取消
                </Checkbox>

                <button onClick={shanchu}>删除</button>
              </div>
            </div>
            {/* 状态显示 */}
            <div
              className="tbodystatu"
              style={{
                display: status ? "block" : "",
              }}
            >
              <img src={require("../../imgs/tu.png")} alt="" />
            </div>
          </div>
        </div>
      </div>
      <div className="joiuho" style={{ display: topindex == 4 ? "block" : "" }}>
        {" "}
        {/* 头部 */}
        <div className="Communityheader">{/* 渲染的 列表|添加 tab切换 */}</div>
        {/* 中间 */}
        <div className="CommunityMain">
          {/* tab切换 内容  列表*/}
          <div
            className="Communitytab"
            style={{ display: activeTab == 0 ? "block" : "" }}
          >
            <div className="CommunityMainTow">
              <div className="CommunityMainTowB">
                <div>状态</div>
                <div>
                  <Select
                    showSearch
                    placeholder="-所有-"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      (option?.label ?? "")
                        .toLowerCase()
                        .includes(input.toLowerCase())
                    }
                    options={[
                      {
                        value: "所有",
                        label: "所有",
                      },
                      {
                        value: "启用",
                        label: "启用",
                      },
                      {
                        value: "禁用",
                        label: "禁用",
                      },
                    ]}
                  />
                </div>
              </div>
              <div>
                <button>搜索</button>
              </div>
            </div>
            <div className="tabBox">
              {/* tab表格 */}
              <table className="table" cellSpacing={0}>
                {/* 头部 */}
                <thead>
                  <tr>
                    <td>
                      <input checked={kg} onChange={inputc} type="checkbox" />
                    </td>
                    <td>ID</td>
                    <td>评论人</td>
                    <td>经纪人</td>
                    <td>内容</td>
                    <td>评论时间</td>
                    <td>状态</td>
                    <td>操作</td>
                  </tr>
                </thead>
                {/* 中间 */}

                <tbody>
                  {/* 渲染 */}
                  {narr
                    ? narr.map((item: any, index: number) => {
                        return (
                          <tr key={index}>
                            <td>
                              <input
                                type="checkbox"
                                checked={item.checked}
                                onChange={() => yfaBdbawi(item)}
                              />
                            </td>
                            <td style={{ width: "12vw" }}>{item.id}</td>
                            <td style={{ width: "12vw" }}>{item.xiaoqu}</td>
                            <td style={{ width: "12vw" }}>{item.quyu}</td>
                            <td style={{ width: "12vw" }}>{item.neirong}</td>
                            <td style={{ width: "10vw" }}>{item.paixu}</td>
                            <td style={{ width: "10vw" }}>
                              <Switch
                                size="default"
                                checkedChildren="正常"
                                unCheckedChildren="禁用"
                                checked={item.checkedtwo}
                                onChange={() => statu(item)}
                              />
                            </td>
                            <td>
                              <button
                                className="del"
                                onClick={() => delect(index)}
                              >
                                删除
                              </button>
                            </td>
                          </tr>
                        );
                      })
                    : ""}
                </tbody>
              </table>
            </div>
            {/* 底部 */}
            <div className="CommunityFoot">
              <div className="CommunityFootA">
                <Checkbox checked={kg} onChange={inputc}>
                  全选/取消
                </Checkbox>

                <button onClick={shanchu}>删除</button>
              </div>
            </div>
            {/* 状态显示 */}
            <div
              className="tbodystatu"
              style={{
                display: status ? "block" : "",
              }}
            >
              <img src={require("../../imgs/tu.png")} alt="" />
            </div>
          </div>
        </div>
      </div>
      <div className="joiuho" style={{ display: topindex == 5 ? "block" : "" }}>
        {" "}
        {/* 头部 */}
        <div className="Communityheader">{/* 渲染的 列表|添加 tab切换 */}</div>
        {/* 中间 */}
        <div className="CommunityMain">
          {/* tab切换 内容  列表*/}
          <div
            className="Communitytab"
            style={{ display: activeTab == 0 ? "block" : "" }}
          >
            <div className="CommunityMainTow">
              <div className="CommunityMainTowB">
                <div>状态</div>
                <div>
                  <Select
                    showSearch
                    placeholder="-所有-"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      (option?.label ?? "")
                        .toLowerCase()
                        .includes(input.toLowerCase())
                    }
                    options={[
                      {
                        value: "所有",
                        label: "所有",
                      },
                      {
                        value: "启用",
                        label: "启用",
                      },
                      {
                        value: "禁用",
                        label: "禁用",
                      },
                    ]}
                  />
                </div>
              </div>
              <div>
                <button>搜索</button>
              </div>
            </div>
            <div className="tabBox">
              {/* tab表格 */}
              <table className="table" cellSpacing={0}>
                {/* 头部 */}
                <thead>
                  <tr>
                    <td>
                      <input checked={kg} onChange={inputc} type="checkbox" />
                    </td>
                    <td>ID</td>
                    <td>评论人</td>
                    <td>经纪人</td>
                    <td>内容</td>
                    <td>评论时间</td>
                    <td>状态</td>
                    <td>操作</td>
                  </tr>
                </thead>
                {/* 中间 */}

                <tbody>
                  {/* 渲染 */}
                  {narr
                    ? narr.map((item: any, index: number) => {
                        return (
                          <tr key={index}>
                            <td>
                              <input
                                type="checkbox"
                                checked={item.checked}
                                onChange={() => yfaBdbawi(item)}
                              />
                            </td>
                            <td style={{ width: "12vw" }}>{item.id}</td>
                            <td style={{ width: "12vw" }}>{item.xiaoqu}</td>
                            <td style={{ width: "12vw" }}>{item.quyu}</td>
                            <td style={{ width: "12vw" }}>{item.neirong}</td>
                            <td style={{ width: "10vw" }}>{item.paixu}</td>
                            <td style={{ width: "10vw" }}>
                              <Switch
                                size="default"
                                checkedChildren="正常"
                                unCheckedChildren="禁用"
                                checked={item.checkedtwo}
                                onChange={() => statu(item)}
                              />
                            </td>
                            <td>
                              <button
                                className="del"
                                onClick={() => delect(index)}
                              >
                                删除
                              </button>
                            </td>
                          </tr>
                        );
                      })
                    : ""}
                </tbody>
              </table>
            </div>
            {/* 底部 */}
            <div className="CommunityFoot">
              <div className="CommunityFootA">
                <Checkbox checked={kg} onChange={inputc}>
                  全选/取消
                </Checkbox>

                <button onClick={shanchu}>删除</button>
              </div>
            </div>
            {/* 状态显示 */}
            <div
              className="tbodystatu"
              style={{
                display: status ? "block" : "",
              }}
            >
              <img src={require("../../imgs/tu.png")} alt="" />
            </div>
          </div>
        </div>
      </div>
      <div className="joiuho" style={{ display: topindex == 6 ? "block" : "" }}>
        {" "}
        {/* 头部 */}
        <div className="Communityheader">{/* 渲染的 列表|添加 tab切换 */}</div>
        {/* 中间 */}
        <div className="CommunityMain">
          {/* tab切换 内容  列表*/}
          <div
            className="Communitytab"
            style={{ display: activeTab == 0 ? "block" : "" }}
          >
            <div className="CommunityMainTow">
              <div className="CommunityMainTowB">
                <div>状态</div>
                <div>
                  <Select
                    showSearch
                    placeholder="-所有-"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      (option?.label ?? "")
                        .toLowerCase()
                        .includes(input.toLowerCase())
                    }
                    options={[
                      {
                        value: "所有",
                        label: "所有",
                      },
                      {
                        value: "启用",
                        label: "启用",
                      },
                      {
                        value: "禁用",
                        label: "禁用",
                      },
                    ]}
                  />
                </div>
              </div>
              <div>
                <button>搜索</button>
              </div>
            </div>
            <div className="tabBox">
              {/* tab表格 */}
              <table className="table" cellSpacing={0}>
                {/* 头部 */}
                <thead>
                  <tr>
                    <td>
                      <input checked={kg} onChange={inputc} type="checkbox" />
                    </td>
                    <td>ID</td>
                    <td>评论人</td>
                    <td>经纪人</td>
                    <td>内容</td>
                    <td>评论时间</td>
                    <td>状态</td>
                    <td>操作</td>
                  </tr>
                </thead>
                {/* 中间 */}

                <tbody>
                  {/* 渲染 */}
                  {narr
                    ? narr.map((item: any, index: number) => {
                        return (
                          <tr key={index}>
                            <td>
                              <input
                                type="checkbox"
                                checked={item.checked}
                                onChange={() => yfaBdbawi(item)}
                              />
                            </td>
                            <td style={{ width: "12vw" }}>{item.id}</td>
                            <td style={{ width: "12vw" }}>{item.xiaoqu}</td>
                            <td style={{ width: "12vw" }}>{item.quyu}</td>
                            <td style={{ width: "12vw" }}>{item.neirong}</td>
                            <td style={{ width: "10vw" }}>{item.paixu}</td>
                            <td style={{ width: "10vw" }}>
                              <Switch
                                size="default"
                                checkedChildren="正常"
                                unCheckedChildren="禁用"
                                checked={item.checkedtwo}
                                onChange={() => statu(item)}
                              />
                            </td>
                            <td>
                              <button
                                className="del"
                                onClick={() => delect(index)}
                              >
                                删除
                              </button>
                            </td>
                          </tr>
                        );
                      })
                    : ""}
                </tbody>
              </table>
            </div>
            {/* 底部 */}
            <div className="CommunityFoot">
              <div className="CommunityFootA">
                <Checkbox checked={kg} onChange={inputc}>
                  全选/取消
                </Checkbox>

                <button onClick={shanchu}>删除</button>
              </div>
            </div>
            {/* 状态显示 */}
            <div
              className="tbodystatu"
              style={{
                display: status ? "block" : "",
              }}
            >
              <img src={require("../../imgs/tu.png")} alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Community;
